<template>
  <div class="wrapper">
    <div id="chart" class="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PieChart',
  props: {
    msg: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  watch: {
    msg: {
      deep: true,
      handler(newdata) {
        this.drawChart(newdata)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart(this.msg)
    })
  },
  methods: {
    drawChart(dataList) {
      // 初始化echarts实例
      const myChart = echarts.init(document.getElementById('chart'))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                formatter: '{b}\n{c}%'
              }
            },
            labelLine: {
              show: false
            },
            data: dataList
          }
        ]
      }
      const index = 0
      myChart.setOption(option, true)
      // 设置默认选中高亮部分
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: index,
        dataIndex: index
      })
      myChart.on('mouseover', function(e) {
        if (e.dataIndex !== index) {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: index
          })
        }
      })

      myChart.on('mouseout', function(e) {
        // 设置默认选中高亮部分
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: index,
          dataIndex: index
        })
      })
    }
  }
}
</script>
<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .chart {
    width: 100%;
    margin:0 auto;
    height: 600px;
    /* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/
    background-size: 100% 100%;
  }
</style>
